<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

  <head th:replace="include/head::head"></head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
        <div th:replace="/include/sidebar"></div>

        <!-- top navigation -->
        <div th:replace="include/navigation::navigation"></div>
        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main">
          <div class="">

            <div class="">
              <div class="col-md-12 col-sm-12  ">
                <div class="x_panel">

                  <div class="x_content">

                    <ul class="nav nav-tabs bar_tabs" id="myTab" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">自动组卷</a>
                      </li>
                    </ul>

                    <div class="tab-content" id="myTabContent">
                      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <!-- Smart Wizard -->
                                <div id="wizard" class="form_wizard wizard_horizontal">
                                  <ul class="wizard_steps">
                                    <li>
                                      <a href="#step-1">
                                        <span class="step_no">1</span>
                                        <span class="step_descr">
                                              第一步<br />
                                              <small>设置组卷参数</small>
                                          </span>
                                      </a>
                                    </li>

                                    <li>
                                      <a href="#step-2">
                                        <span class="step_no">2</span>
                                        <span class="step_descr">
                                              第二步<br />
                                              <small>下载试卷及答案</small>
                                          </span>
                                      </a>
                                    </li>
                                  </ul>
                                  <div id="step-1">
                                    <table class="table table-bordered">
                                      <thead>
                                      <tr>
                                        <th>题目类型</th>
                                        <th>题目数量</th>
                                        <th>单题分数</th>
                                        <th>总分</th>
                                      </tr>
                                      </thead>
                                      <tbody>
                                      <tr>
                                        <th scope="row">选择题</th>
                                        <td><input id="choice-number" class="paper-parameter" placeholder="0"></td>
                                        <td><input id="choice-score" class="paper-parameter" placeholder="0"></td>
                                        <td id="choice-part">0</td>
                                      </tr>
                                      <tr>
                                        <th scope="row">判断题</th>
                                        <td><input id="judge-number" class="paper-parameter" placeholder="0"></td>
                                        <td><input id="judge-score" class="paper-parameter" placeholder="0"></td>
                                        <td id="judge-part">0</td>
                                      </tr>
                                      <tr>
                                        <th scope="row">填空题</th>
                                        <td><input id="filling-number" class="paper-parameter" placeholder="0"></td>
                                        <td><input id="filling-score" class="paper-parameter" placeholder="0"></td>
                                        <td id="filling-part">0</td>
                                      </tr>
                                      <tr>
                                        <th scope="row">简答题</th>
                                        <td><input id="shortAnswer-number" class="paper-parameter" placeholder="0"></td>
                                        <td><input id="shortAnswer-score" class="paper-parameter" placeholder="0"></td>
                                        <td id="shortAnswer-part">0</td>
                                      </tr>
                                      <tr>
                                        <th scope="row">应用题</th>
                                        <td><input id="solve-number" class="paper-parameter" placeholder="0"></td>
                                        <td><input id="solve-score" class="paper-parameter" placeholder="0"></td>
                                        <td id="solve-part">0</td>
                                      </tr>
                                      <tr>
                                        <th scope="row">试卷名称</th>
                                        <td><input id="exam-name"placeholder="试卷名"></td>
                                        <th scope="row">题目总数</th>
                                        <td id="total-number">0</td>
                                      </tr>
                                      <tr>
                                        <th scope="row">期望难度</th>
                                        <td><input id="expect" placeholder="期望难度"></td>
                                        <th scope="row">试卷总分</th>
                                        <td id="total-score">0</td>
                                      </tr>
                                      </tbody>
                                    </table>
                                  </div>
                                  <div id="step-2">
                                    <label class="col-form-label col-md-4 col-sm-4 label-align" >
                                    </label>
                                    <h2 class="StepTitle">&nbsp&nbsp下载试卷及答案</h2>
                                    <form id="download" class="form-horizontal form-label-left">

                                      <div class="form-group row">
                                        <label class="col-form-label col-md-4 col-sm-4 label-align" >
                                        </label>
                                        <div class="col-md-2 col-sm-2 ">
                                          <input type="hidden" id="paperPath">
                                          <input id="download-paper" type="button"   class="form-control btn-bd-primary" th:value="点击下载试卷">
                                        </div>
                                      </div>
                                    </form>

                                  </div>

                                </div>
                                <!-- End SmartWizard Content -->
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
        <!-- /page content -->

        <!-- footer content -->
        <div th:replace="include/footer::footer"></div>
        <!-- /footer content -->
      </div>
    </div>

    <div th:replace="include/javascript::javascript"></div>
  <script>
    $(function () {
      $('#wizard').smartWizard();
      $('#wizard_verticle').smartWizard({
        transitionEffect: 'slide'
      });
      $('.buttonNext').addClass('btn btn-success');
      $('.buttonPrevious').addClass('btn btn-primary');
      $('.buttonFinish').hide();
      var button=$('<a id="generator" class="btn btn-secondary" style="color: #fff">生成试卷</a>').on("click",function () {
        var examname=$("#exam-name").val();
        var choice=$("#choice-number").val();
        var judge=$("#judge-number").val();
        var filling=$("#filling-number").val();
        var shortanswer=$("#shortAnswer-number").val();
        var solve=$("#solve-number").val();
        var choiceScore=$("#choice-score").val();
        var judgeScore=$("#judge-score").val();
        var fillinfScore=$("#filling-score").val();
        var shortAnswerScore=$("#shortAnswer-score").val();
        var solveScore=$("#solve-score").val();
        var expect=$("#expect").val();
        var examdata={examName:examname,choice:choice,judge:judge,filling:filling,shortAnswer:shortanswer,solve:solve,choiceScore:choiceScore,judgeScore:judgeScore,fillingScore:fillinfScore,shortScore:shortAnswerScore,solveScore:solveScore,expect:expect};
        $.ajax({
          type : "post",
          url : "/exam/autogenerator",
          contentType: "application/json;charset=UTF-8",
          data : JSON.stringify(examdata),
          dataType:"json",
          success : function(message){
            if (message.success){
              alert("试卷已生成");
              var paperPath=message.paperPath;
              $("#paperPath").attr("value",paperPath);
            }
          }
        })
      });
      $('.actionBar').append(button);
      $("#download-paper").on("click",function () {
        var paperPath=$("#paperPath").val();
        window.location.href="/exam/download_paper?path="+paperPath;
      })
      $(".paper-parameter").on("input propertychange",function () {
        var choiceNumber=$("#choice-number").val();
        var choiceScore=$("#choice-score").val();
        var choicePart=choiceScore*choiceNumber;
        var judgeNumber=$("#judge-number").val();
        var judgeScore=$("#judge-score").val();
        var judgePart=judgeScore*judgeNumber;
        var fillingNumber=$("#filling-number").val();
        var fillingScore=$("#filling-score").val();
        var fillingPart=fillingScore*fillingNumber;
        var shortAnswerNumber=$("#shortAnswer-number").val();
        var shortAnswerScore=$("#shortAnswer-score").val();
        var shortAnswerPart=shortAnswerNumber*shortAnswerScore;
        var solveNumber=$("#solve-number").val();
        var solveScore=$("#solve-score").val();
        var solvePart=solveScore*solveNumber;
        var totalNumber=Number(choiceNumber)+Number(judgeNumber)+Number(fillingNumber)+Number(solveNumber)+Number(shortAnswerNumber);
        var totalScore=choicePart+judgePart+fillingPart+shortAnswerPart+solvePart;

        $("#choice-part").text(choicePart);
        $("#judge-part").text(judgePart);
        $("#filling-part").text(fillingPart);
        $("#shortAnswer-part").text(shortAnswerPart);
        $("#solve-part").text(solvePart);
        $("#total-number").text(totalNumber);
        $("#total-score").text(totalScore);
      })
    })
  </script>
  </body>
</html>
